<template>
  <div>
    <div class="search">
      <input
      class="search-input"
      type="text"
      placeholder="请输入搜索内容"
      v-model= "keyword"
      >
    </div>
    <div class="searchList" v-show= "keyword">
			<ul>
				<li v-for= "item of List"
				class="searchContent border-topbottom"
				:key= "item.id"
				>{{item}}
				</li>
				<li class="searchContent" v-show="hasNoList">没有找到合适城市</li>
			</ul>
		</div>
  </div>
</template>
<script>
export default {
  name: 'CitySearch',
  props: {
    cities: Object
  },
  data () {
    return {
      List: [],
      keyword: '',
      timer: null
    }
  },
  watch: {
    keyword () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      if (!this.keyword) {
        this.List = []
      }
      this.timer = setTimeout(() => {
        const result = []
        for (let i in this.cities) {
          this.cities[i].forEach((value) => {
            if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
              result.push(value.name)
            }
          })
        }
        this.List = result
      }, 100)
    }
  },
  computed: {
    hasNoList () {
      return !this.List.length
    }
  }
}
/*
1.先布局List所在的div标签ul和li
2.使用v-model获得input 中的值 keyword
3.在City中把cities用双向绑定给search组件传值，Search用props接收
4.设置监听，当keyword发生改变的时候就用节流的方法，同时设置一个空数组来接收筛选后的值
5.使用 for in 循环来获得cities下标i的值，使用this.cities[i].forEach(value)获得value值。
6.如果输入的值在cities[i].spell中或者在cities[i].name中的时候就添加到result数组中
7.在循环外让this.List等于result（此时List中就有值）
8.不符合时候出现 “没有找到合适城市”需要多设置一个li标签 使用v-show，在List没有长度的时候隐藏
9.同时由于删除后还存在List的div标签（有个框），所以设置v-show ，在keyword没有值的时候隐藏
10.由于标签中最好没有逻辑所以使用computed计算！计算属性是正常的 xx： { return XXX}而生命周期钩子还有data是调用方法 xx() {return XX}
*/
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
	.search
		position: relative
		height: .76rem
		padding: .1rem
		background: $bgColor
		.search-input
			position:absolute
			box-sizing: border-box
			width:97.5%
			line-height: .62rem
			height: .62rem
			border: 0
			text-align: center
			border-radius: .06rem
	.searchList
		overflow: hidden
		position:absolute
		z-index: 1
		width:95%
		border-radius: .06rem
		clear:both
		padding: .1rem
		background: #eee
		left: .1rem
		top: 1.577rem
		font-size: .30rem
		.searchContent
			padding: .1rem
</style>
